// common.js
var $ = require("jquery");
var mui = require("mui");

$(function () {
  var headerAsideIcon = $(".header-aside-icon");
  headerAsideIcon.on("tap", function () {
    mui(".mui-off-canvas-wrap").offCanvas().toggle();
  });

  /**
   * index search 页面搜索
   * 选择分类
   */
  var popover = $("#search-input-popover");
  var chooseResult = $(".search-choose-result");
  popover.on("tap", ".mui-table-view-cell", function () {
    chooseResult.text($(this).text()).data("key", $(this).data("key"));
    mui("#search-input-popover").popover("toggle");
  });

  /**
   * mui 全局配置
   */
  mui.init();
  mui(".mui-scroll-wrapper").scroll({
    deceleration: 0.0002, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  });
  mui("body").on("tap", "a", function () {
    if ($(this).hasClass("mui-control-item") || $(this).hasClass("not-href")) {
      return;
    }
    document.location.href = this.href;
  });

  /**
   * 监听页面滚动
   */
  var contentElem = $(".mui-scroll-wrapper.mui-content");
  var startY = 0;
  var offsetLong = 30;
  var swipeUpClass = ".hide-while-swipedown-up";
  var swipeDownClass = ".hide-while-swipedown-down";
  var transformUpClass = "transformUp";
  var transformDownClass = "transformDown";
  var noSwipeClass = "no-swipe-wrapper";

  contentElem
    .on("swipeup", function (e) {
      console.log('up')
      if (!IsSwipeAllowed(swipeUpClass)) {
        $(swipeUpClass).addClass(transformUpClass);
        $(swipeDownClass).addClass(transformDownClass);
      }
    })
    .on("swipedown", function (e) {
      console.log('down')
      if (!IsSwipeAllowed(swipeUpClass)) {
        $(swipeUpClass).removeClass(transformUpClass);
        $(swipeDownClass).removeClass(transformDownClass);
      }
    })
    .on("dragstart", function (e) {
      startY = e.detail.center.y;
    })
    .on(
      "drag",
      throttle(function (e) {
        var dragY = e.detail.center.y;
        var offsetY = dragY - startY;
        if (!IsSwipeAllowed(swipeUpClass)) {
          if (offsetY > offsetLong) {
            $(swipeUpClass).removeClass(transformUpClass);
          } else if (offsetY < -offsetLong) {
            $(swipeUpClass).addClass(transformUpClass);
          }
        }
        if (!IsSwipeAllowed(swipeDownClass)) {
          if (offsetY > offsetLong) {
            $(swipeDownClass).removeClass(transformDownClass);
          } else if (offsetY < -offsetLong) {
            $(swipeDownClass).addClass(transformDownClass);
          }
        }
      }, 20)
    );

  function IsSwipeAllowed(el) {
    return (
      $(el).hasClass(noSwipeClass) || $(el).parent().hasClass(noSwipeClass)
    );
  }
  // fn是我们需要包装的事件回调, delay是时间间隔的阈值
  function throttle(fn, delay) {
    // last为上一次触发回调的时间, timer是定时器
    var last = 0,
      timer = null;

    // 将throttle处理结果当作函数返回
    return function () {
      // 保留调用时的this上下文
      var context = this;
      // 保留调用时传入的参数
      var args = arguments;
      // 记录本次触发回调的时间
      var now = +new Date();

      // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
      if (now - last < delay) {
        // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
        clearTimeout(timer);
        timer = setTimeout(function () {
          last = now;
          fn.apply(context, args);
        }, delay);
      } else {
        // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
        last = now;
        fn.apply(context, args);
      }
    };
  }
});
